<template>
  <section class="show-section">
    <div class="show-item">
      <div class="show-title">产品展示</div>
      <p class="show-text">更智能&nbsp;更多样&nbsp;更专业&nbsp;更快捷</p>
      <div class="show-content">
        <div class="show-button-item show-button-1">
          <div>
            <!--                            图标-->
            <div class="svg_bg_img svg-1"></div>
            <div class="show-button">移动端</div>
          </div>
        </div>
        <div class="show-button-item show-button-2">
          <div>
            <!--                            图标-->
            <div class="svg_bg_img svg-2"></div>
            <div class="show-button web-button">网页端</div>
          </div>
        </div>
        <div class="show-button-item show-button-3">
          <div>
            <!--                            图标-->
            <div class="svg_bg_img svg-3"></div>
            <div class="show-button">后台管理</div>
          </div>
        </div>
      </div>

      <div class="show_version-item ">

        <!--                    不同应用版本介绍的左边部分-->
        <div class="show_version-left">
          <p class="version-text version1_text-1">立足于党务管理、党建工作、党员教育、党建宣传核心业务，为党委、党支部、党员提供一站式智能服务，党建工作落实执行、管理监督全程可视可控可管，帮助广大党务干部实现党建工作“减负、提质、增效”。</p>
          <!--                       版本优点介绍部分-->
          <ul class="version-module">
            <li class="version-list" v-for="item in slogan">
              <span class="svg-pointing"></span>{{item}}
            </li>

          </ul>
        </div>
        <!--                    不同应用版本右边部分-->
        <div class="show_version-right">
          <!--                        应用图片-->
          <img class="version-img version_img-1" src="/src/assets/images/index.jpg">
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const slogan = [
    "高效管理，轻松掌控。",
    "实时监控，及时应对问题。",
    "演绎舒适视觉，创造简洁体验。",
    "丰富的的业务管理，覆盖大多数典型业务场景。",
    "易用性。能够让用户高效管理，简约却不失内涵。",
    "色彩的舒适度良好，界面统一简洁，颜色搭配适当。"
]
</script>

<style scoped>
/*产品展示模块*/
.show-section{
  width:100%;
  height:65rem;
  margin-top: 20rem;
  /*background-color: yellow;*/
  /*margin-bottom: 3rem;*/
}
.show-item{

}
.show-title{
  font-size:3rem;
  text-align: center;
  color:rgba(156, 0, 0, 1);
  font-weight: bolder;
}
.show-text{
  text-align: center;
  font-weight: bolder;
  margin-top: 3rem;
  font-size: 1.5rem;
}

.show-content{
  width:75%;
  height:15rem;
  /*background-color: yellow;*/
  margin: 0 auto;
  display: flex;
  position: relative;
  justify-content: space-around;
}

.show-button-item{
  /*margin: 0 auto;*/
  position: absolute;
  height:100%;
}
.show-button-item div{
  position: relative;
}
.show-button-1{
  left:5%;
  top:12%;
}
.show-button-2{
  left:30%;
  top:12%;
}
.show-button-3{
  left:55%;
  top:12%;
}
.show-button{
  font-family: 楷体;
  font-weight: bold;
  position:absolute;
  margin-top: 2.5rem;
  margin-left: 2rem;
  font-size: 2rem;
}

.web-button{
  margin-top: 1rem;
}

.svg_bg_img {
  position: absolute;
  left:20%;
  top:30%;
  width:7rem;
  height:7rem;

  /*background-color: #82111f;*/
}
.svg-1{
  background: url('/src/assets/svg/phone-active.svg') no-repeat;
  background-size: 5.5rem 5.5rem;
  background-position: bottom;
}
.svg-2{
  background: url('/src/assets/svg/pc.svg') no-repeat;
  background-size: 6rem 6rem;
  margin-top: 1.5rem;
}
.svg-3{
  background: url('/src/assets/svg/admin_web.svg') no-repeat;
  background-size: 5.5rem 5.5rem;
  background-position: bottom;
}
.show_version-item{
  width:75%;
  height:30rem;
  margin: 0 auto;
  /*background-color: green;*/
  display: flex;
}
.show_version-left{
  width:70%;
  height:100%;
  padding: 1.5rem;
  /*background-color: #82111f;*/
}
/*.show_version-left h2{*/
/*    font-size: 2rem;*/
/*    text-align: center;*/
/*}*/
.version-text{
  margin: 2rem;
  font-size: 1.6rem;
  letter-spacing: 3px;
  font-family: 宋体;
  font-weight: bold;
  display: inline-block;
}
.version-module{
  line-height: 4rem;
  margin-left: 7rem;

}
.version-list{
  list-style: none;
  position: relative;
}
.svg-pointing{
  position: absolute;
  margin-left: -4rem;
  margin-top: 0.5rem;
  background: url('/src/assets/svg/bingo.svg') no-repeat;
  width:3rem;
  height:3rem;
  background-size: 3rem 3rem;

}
.show_version-right{
  width:25%;
  height:100%;
  /*background-color: yellow;*/
}
.version-img{
  width:258px;
  height: 480px;
  position:absolute;
  overflow: hidden;
  margin-left:0rem;
  margin-top: -12rem;
  /*box-shadow: 2px 2px 15px rgba(0,0,0,0.2);*/
  filter: drop-shadow(4px 10px 8px grey);
}


</style>
